<template>
  <div>
    <a-modal
      v-model:visible="visible"
      title="医废标签"
      @ok="handleOk"
      @cancel="closeModal"
      ok-text="打印标签"
      cancel-text="取消"
    >
      <div class="label-content" id="printLabel">
        <div class="headline">
          {{ dataForm.hospitalBaseName }}
          <div class="type">
            <img src="../../../../assets/5.png" alt="" />
          </div>
        </div>
        <div class="label-info s-d-flex s-ai-stretch pt20 pb15">
          <div id="qrcode" class="code qrcode" ref="qrCodeUrl"></div>
          <div
            class="
              info
              s-d-flex s-ai-column s-ai-stretch s-jc-space-between
              pl15
            "
          >
            <div class="item eps-1">编号:{{ dataForm.code }}</div>
            <div class="item">来源:{{ dataForm.hospitalDepartName }}</div>
            <div class="item">类型:{{ dataForm.wasteClassifyName }}</div>
            <div class="item">
              重量:{{ dataForm.weight ? dataForm.weight : 0 }}kg
            </div>
          </div>
        </div>
        <div class="foot s-d-flex s-jc-space-between pt15 mt15">
          <div>移交人:{{ dataForm.handUserStaffName }}</div>
          <div>时间:{{ dataForm.createTime }}</div>
        </div>
      </div>
    </a-modal>
  </div>
</template>
<script>
import Print from '@/components/print.js'
import {
  defineComponent,
  getCurrentInstance,
  reactive,
  ref,
  toRef,
  toRefs,
} from "vue";
import QRCode from "qrcodejs2";

export default {
  setup() {
    const { proxy }  = getCurrentInstance();
    const visible = ref(false);
    const qrCodeUrl = ref();
    const dataValue = reactive({ dataForm: {} });
    const qrcode = ref("");

    const creatQrCode = (content) => {
      console.log(321);
      console.log(document.querySelector("#qrcode"));

      qrcode.value = new QRCode(document.querySelector("#qrcode"), {
        text: content, // 需要转换为二维码的内容
        width: 85,
        height: 85,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    };
    const showModal = (_row) => {
      console.log("999999");
      console.log(_row.content);
      visible.value = true;
      proxy.$nextTick(() => {
        dataValue.dataForm = _row;
        creatQrCode(_row.content);
      });
    };
    const closeModal = () => {
      console.log(qrcode.value)
      qrcode.value.clear();
      document.getElementById("qrcode").innerHTML = "";
    };
    const handleOk = () => {
      Print(document.querySelector('#printLabel'))
    };
    return {
      visible,
      proxy,
      qrCodeUrl,
      ...toRefs(dataValue),
      qrcode,
      handleOk,
      closeModal,
      showModal,
      creatQrCode,
    };
  },
};
</script>
<style lang="scss" scoped>
.qrcode {
  display: inline-block;
  width: 96px;
  height: 96px;
  background-color: #fff;
  padding: 6px;
  box-sizing: border-box;
}
.label-content {
  background: #ffe700;
  border-radius: 6px;
  width: 100%;
  height: 244px;
  padding: 20px;
  color: #11091a;
  .headline {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    position: relative;
    .type {
      position: absolute;
      right: 0;
      top: -8px;
      img {
        width: 32px;
      }
    }
  }
}
</style>